<template>
  <div>
    <div class="table_content">
      <el-table :data="logData" style="width: 100%" height="450px">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <!-- 访问人真实姓名 -->
        <el-table-column prop="realname" label="访问人真实姓名" align="center">
        </el-table-column>
        <!-- 访问方式 -->
        <el-table-column prop="method" label="访问方式" align="center">
        </el-table-column>
        <!-- 访问路径 -->
        <el-table-column prop="content" label="访问路径" align="center">
        </el-table-column>
        <!-- 访问时间 -->
        <el-table-column prop="logTime" label="访问时间" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.logTime | filter }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get, post } from "../../utils/request.js";
import moment from "moment";

export default {
  data() {
    return {
      logData: [],
      // 当前页码
      currentPage: 1,
      pageSize: 10,
      total: 20,
    };
  },
  filters: {
    filter: function (data) {
      moment.locale("zh-cn", {
        months:
          "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
            "_"
          ),
        monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
          "_"
        ),
        weekdays: "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
        weekdaysShort: "周日_周一_周二_周三_周四_周五_周六".split("_"),
        weekdaysMin: "日_一_二_三_四_五_六".split("_"),
        longDateFormat: {
          LT: "HH:mm",
          LTS: "HH:mm:ss",
          L: "YYYY-MM-DD",
          LL: "YYYY年MM月DD日",
          LLL: "YYYY年MM月DD日Ah点mm分",
          LLLL: "YYYY年MM月DD日ddddAh点mm分",
          l: "YYYY-M-D",
          ll: "YYYY年M月D日",
          lll: "YYYY年M月D日 HH:mm",
          llll: "YYYY年M月D日dddd HH:mm",
        },
        meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
        meridiemHour: function (hour, meridiem) {
          if (hour === 12) {
            hour = 0;
          }
          if (
            meridiem === "凌晨" ||
            meridiem === "早上" ||
            meridiem === "上午"
          ) {
            return hour;
          } else if (meridiem === "下午" || meridiem === "晚上") {
            return hour + 12;
          } else {
            // '中午'
            return hour >= 11 ? hour : hour + 12;
          }
        },
        meridiem: function (hour, minute, isLower) {
          const hm = hour * 100 + minute;
          if (hm < 600) {
            return "凌晨";
          } else if (hm < 900) {
            return "早上";
          } else if (hm < 1130) {
            return "上午";
          } else if (hm < 1230) {
            return "中午";
          } else if (hm < 1800) {
            return "下午";
          } else {
            return "晚上";
          }
        },
        calendar: {
          sameDay: "[今天]LT",
          nextDay: "[明天]LT",
          nextWeek: "[下]ddddLT",
          lastDay: "[昨天]LT",
          lastWeek: "[上]ddddLT",
          sameElse: "L",
        },
        dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
        ordinal: function (number, period) {
          switch (period) {
            case "d":
            case "D":
            case "DDD":
              return number + "日";
            case "M":
              return number + "月";
            case "w":
            case "W":
              return number + "周";
            default:
              return number;
          }
        },
        relativeTime: {
          future: "%s内",
          past: "%s前",
          s: "几秒",
          ss: "%d秒",
          m: "1分钟",
          mm: "%d分钟",
          h: "1小时",
          hh: "%d小时",
          d: "1天",
          dd: "%d天",
          M: "1个月",
          MM: "%d个月",
          y: "1年",
          yy: "%d年",
        },
        week: {
          dow: 1,
          doy: 4,
        },
      });
      return moment(data).format("lll");
    },
  },
  computed: {},
  methods: {
    async getAlllogData() {
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      let res = await get("/baseLog/pageQuery", data);
      this.logData = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getAlllogData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAlllogData();
    },
  },
  created() {
    this.getAlllogData();
  },
  mounted() {},
};
</script>
<style scoped>
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>